<template>
  <div>
      <el-main>
          <!-- 搜索框区 -->
      <div>
        <el-input
          style="width: 180px; height: 32px; margin-right: 5px"
          placeholder="请输入id"
          v-model="S.id"
          suffix-icon="Search"
          clearable
        >
        </el-input>
        <el-input
          style="width: 180px; height: 32px; margin-right: 5px"
          placeholder="请输入状态"
          v-model="S.state"
          suffix-icon="Search"
          clearable
        >
        </el-input>
        <el-button type="primary"
          style="height: 32px; width: 60px; font-size: 13px" @click="load">搜索</el-button>
          <el-button type="warning"
          style="height: 32px; width: 60px; font-size: 13px" @click="reset">重置</el-button>
      </div>

      <!-- 新增按钮区域 -->
      <div style="margin: 10px 0px">
        <!-- <el-button disabled @click="handleAdd" type="primary">
          新增<el-icon class="el-icon--right"><CirclePlus /></el-icon>
        </el-button>

        <el-popconfirm
                width="220"
                confirm-button-text="确定"
                cancel-button-text="不,再想想"
                icon-color="#626AEF"
                title="您确定要删除吗?"
                @confirm="delBatch"
              >
                <template #reference>
                 <el-button disabled type="danger">
                  批量删除<el-icon class="el-icon--right"><Remove /></el-icon>
                </el-button>
                </template>
              </el-popconfirm>

        <el-upload
            class="upload-demo"
            :action="'http://'+serverIp+':9090/user/import'"
            style="display: inline-block;margin: 0px 12px;"
            :show-file-list="false"
            accept="xlsx"
            :on-success="handleImportSuccess"
            :on-error="handleImportError"
            >
             <el-button disabled type="primary">
                导入<el-icon class="el-icon--right"><Upload /></el-icon>
             </el-button>
        </el-upload>
       


        <el-button disabled type="primary" @click="handleExport">
          导出<el-icon class="el-icon--right"><Download /></el-icon>
        </el-button> -->
      </div>

      <div style="margin-top: 30px;height: 73vh;">
        <el-scrollbar>
          <el-table
            :data="tableData"
            border
            stripe
            size="default"

            :header-cell-style="{textAlign: 'center'}"

            :header-cell-class-name="headerBg"
            @selection-change="handleSelectionChange"
            row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
           <el-table-column type="selection" width="55" />
            <el-table-column  prop="id" label="评论id" width="180" />
            <!-- <el-table-column  prop="username" label="用户名" width="120" /> -->
            <el-table-column prop="content" label="内容" width="360" />
            <el-table-column prop="submitTime" label="发布时间" width="170" />
            <el-table-column prop="state" label="状态" width="110" >
              <template #default="scope">
                <el-tag v-if="scope.row.state === '正常'" type="">{{scope.row.state}}</el-tag>
                <el-tag v-if="scope.row.state === '审核中'" type="warning">{{scope.row.state}}</el-tag>
                <el-tag v-if="scope.row.state === '屏蔽'" type="info">{{scope.row.state}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="likeNum" label="点赞数" width="110" />
            <el-table-column prop="edit" label="操作">
              <template #default="scope">
                <el-button
                type="success"
                  @click="handleEdit(scope.$index, scope.row)"><el-icon style="margin-left:3px"><EditPen /></el-icon>
                  </el-button>
                <el-popconfirm
                width="220"
                confirm-button-text="确定"
                cancel-button-text="不,再想想"
                icon-color="#626AEF"
                title="您确定要删除吗?"
                @confirm="handleDelete(scope.$index, scope.row.id)"
              >
                <template #reference>
                  <el-button disabled type="danger"><el-icon style="margin-left:3px"><Delete /></el-icon>
                  </el-button>
                </template>
              </el-popconfirm>
              
              <!-- 详情按钮 -->
              <el-button @click="handleInfo(scope.$index, scope.row)" type="info"><el-icon style="margin-left:3px"><InfoFilled /></el-icon></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <!-- <div style="margin: 10px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[2,5,10,15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div> -->
        </el-scrollbar>

        <!-- 对话框 -->
         <el-dialog @close="handleClose"  title="评论信息" v-model="dialogFormVisible" width="30%" >
          <el-form label-width="80px" size="small">
            <el-form-item label="id">
              <el-input disabled v-model="form.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  label="内容">
              <el-input disabled v-model="form.content" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  label="发布时间">
              <el-input disabled v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态">
             <el-select v-model="form.state" placeholder="请选择评论状态" style="width: 100%">
                <el-option  label="审核中" value="审核中">
                    <el-tag type="warning">审核中</el-tag>
                </el-option>
                <el-option  label="屏蔽" value="屏蔽">
                    <el-tag type="info">屏蔽</el-tag>
                </el-option>
                <el-option  label="正常" value="正常">
                    <el-tag type="">正常</el-tag>
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click=" this.dialogFormVisible = false,this.form = {}">取消</el-button>
                <el-button type="primary" @click="save">
                  确定
                </el-button>
              </span>
            </template>
        </el-dialog>

        <!-- 抽屉 -->
          <el-drawer
              ref="drawerRef"
              v-model="drawer"
              title="评论详情"
              direction="rtl"
              :before-close="()=>{this.drawer = false,this.form = {}}"
            >
              <div>
                    <el-descriptions
                      title="用户信息"
                      :column="1"
                      size="default"
                      direction="horizontal"
                    >
                      <el-descriptions-item label="用户名：">{{userForm.username}}</el-descriptions-item>
                      <el-descriptions-item label="电话：">{{userForm.phone}}</el-descriptions-item>
                      <el-descriptions-item label="年龄">{{userForm.age}}</el-descriptions-item>
                      <el-descriptions-item label="性别">{{userForm.gender}}</el-descriptions-item>
                    </el-descriptions>
              </div>
            </el-drawer>

       </div>
    </el-main>
      
    
  </div>
</template>

<script>
import {serverIp} from '../../public/config.js'

export default {
    name:'name',
    data(){
        return{
          serverIp:serverIp,
          //
          drawer:false,
          userForm:{
            username:"",
            phone:""
          },
          //
            tableData:[],
            //user
            pageNum:1,
            pageSize:10,
            total:0,
            S:{
              username:"",
              phone:"",
              id:""
            },
            address:"",
            //
            form:{},
            roles:[],
            dialogFormVisible: false,
            // 多选框选中对象
            multipleSelection:[],
        }
    },
    created(){
    //
    this.load()





    },
    methods:{
      //详情按钮
      handleInfo(index,row){
          //console.log('row',row.openid);
            //发送请求
            this.userInfoByOpenid(row.openid)
            // this.roomInfoByRoomId(row.roomId)
            //
            this.drawer = true
            this.form = row
        },
         // 根据openid查询用户信息
        userInfoByOpenid(openId){
            //获取用户信息byId
            //准备JSON
            let S = {
                username:"",
                phone:"",
                id:""
            }
            this.request.post("/user/getAll/1/10000",JSON.stringify(S)).then(res => {
              if(res.code === 200){
                  //筛选出该openid的user
                  res.data.records.forEach(item => {
                      if(item.openid === openId){
                          this.userForm = item
                          //console.log(item);
                          return
                      }
                  });
              }
              
            // this.roles = res.data
          })
        },
        //导出成功
        handleExport(){
            window.open(`http://${serverIp}:9090/user/export`)
        },
        //导入失败
        handleImportError(){
             this.$message.error("导入失败!")
        },
        //导入成功
        handleImportSuccess(){
            this.$message.success("导入成功!")
            this.load()
        },
         //多选删除
        delBatch(){
        let ids = this.multipleSelection.map(v => v.id)  //[{},{},{}] => [1,2,3]
        //console.log("多选删除",ids);
        this.request.post("/user/deleteIds",ids).then(res => {
          //console.log(res);
            if (res.code === 200) {
            this.$message.success("删除成功")
            this.load()
            } else {
            this.$message.error("删除失败")
            }
        })
        },
        //多选选中的对象
        handleSelectionChange(val){
        this.multipleSelection = val
        },
        //对话框关闭
        handleClose(){

        this.dialogFormVisible = false,
        this.form = {}
        },
    
        //删除行
        handleDelete(index,id){
        this.request.delete("/user/delete/"+ id).then(res => {
            if (res.code === 200) {
            this.$message.success("删除成功")
            this.load()
            } else {
            this.$message.error("删除失败")
            }
        })
        },
        //编辑
        handleEdit(index, row){
        //console.log(index, row);
        this.dialogFormVisible = true,
        this.form = row
        },
        //保存表单
        save() {
            //更新
            //console.log("update");
            let a = {
              id:this.form.id,
              state:this.form.state
            }
            this.request.put("/remark/approve", JSON.stringify(a)).then(res => {
                      //console.log('update',res);
                        if (res.code === 200) {
                        this.$message.success("保存成功")
                        this.dialogFormVisible = false
                        this.form = {}
                        this.load()
                        } else {
                        this.$message.error("保存失败")
                        }
                    })
        },

        //新增按钮
        handleAdd(){
        this.dialogFormVisible = true;
        },
        // 表头背景
        headerBg({ row, rowIndex }) {
        if (rowIndex == 0) {
            return "headerBgClass";
        }
        },

        // 重置按钮
        reset(){
        this.S.id = '',
        this.S.username = '',
        this.S.phone = '',
        this.load()
        },

        //发送请求
        load() {
          //准备Json对象
          let f =  {
                  id:this.S.id,
                  state:this.S.state
                }
            this.request.post("/remark/getAll/"+this.pageNum+"/"+"20000",JSON.stringify(f)
            // {
            //     params: {
            //     username: this.username,
            //     email: this.email,
            //     address:this.address
            //     }
            // }
            ).then(res => {
                if(res.code === 200)
                //console.log(res)

                //准备一级评论
              //  let aa = [{
              //         content:"这个不错",
              //         id:1,
              //         likeNum:0,
              //         objectId:"1",
              //         openid:"1",
              //         state:"审核中",
              //         submitTime:"2023-01-09 14:44:58",
              //             children:[{
              //               content:"这个不错",
              //               id:1,
              //               likeNum:0,
              //               objectId:"1",
              //               openid:"1",
              //               state:"审核中",
              //               submitTime:"2023-01-09 14:44:58",
              //             }]
              //       },
              //       {
              //         content:"这个不错",
              //         id:1,
              //         likeNum:0,
              //         objectId:"1",
              //         openid:"1",
              //         state:"审核中",
              //         submitTime:"2023-01-09 14:44:58",
              //             children:{
              //               content:"这个不错",
              //               id:1,
              //               likeNum:0,
              //               objectId:"1",
              //               openid:"1",
              //               state:"审核中",
              //               submitTime:"2023-01-09 14:44:58",
              //             }
              //       }]
                 //准备一级评论  
                 
                 var f = []
                 //准备二级评论 
                 var s = []
                  res.data.records.forEach(item => {
                      item.children = []
                      if(item.objectId === null){
                          //一级评论
                          //console.log(item.id);
                          f.push(item)
                      }else{
                        //二级
                        s.push(item)
                      }
                  });
                  //console.log(f,s);

                s.forEach(sitem => {
                  f.forEach( fitem => {
                      if(sitem.objectId == fitem.id){
                        fitem.children.push(sitem)
                        return
                      }
                  })
                })
                this.tableData = f
                this.total = res.data.total
                //console.log(this.tableData);
            })
          //   this.request.get("/role").then(res => {
          //   this.roles = res.data
          // })

        },

        // 分页器
        handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.load();

        },
        handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);
        this.pageNum = val;
        this.load();
        },
    },
    computed:{
        // gender(){
        //   //console.log("WWW");
        //   if (this.form.gender) {
        //     return "男"
        //   }else{
        //     return "女"
        //   }
        // }
         gender:{
           set:function(newValue){
            //  //console.log('@@',newValue,this.form);
              this.form.gender = newValue
           },
           get:function(){
            //  字符类型  gender
             if (this.form.gender === 1 || this.form.gender === "1") {
                return "1"
              }else if(this.form.gender === 0 || this.form.gender === "0"){
                return "0"
              }else{
                return ""
              }
           }
        }

    },
    watch:{
      // 'form.gender':{
      //   deep:true,
      //   handler:function(newV,oldV){
      //     //console.log("@@",newV,oldV);
      //       this.form.gender = newV
      //   }
      // }
    }

}
</script>

<style>
.headerBgClass {
  background-color: rgb(221, 213, 213) !important;
}
</style>